@charset "utf-8";

@import "common/iconfont";
@import "common/common";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}

.web{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .content{
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        width: 100%;
//      height: 100%;
//      background: skyblue;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        //轮播图
        .carousel_wrap{
            width: 100%;
            height: r(355px);
            border-top: r(1px) solid #d9d9d9;
            border-bottom: r(1px) solid #d9d9d9;
        }
        .lunbo_wrap {
            position: relative;
            /*border: 1px solid firebrick;*/
            overflow: hidden;
            width: 100%;
        }
        
        .pic_box {
            height: 100%;
            /*width: 9999px;*/
            white-space: nowrap;
            font-size: 0;
            
        }
        
        .pic_box li {
            position: relative;
            height: 100%;
            /*float: left;*/
            display: inline-block;
            .text_wrap{
                position: absolute;
                bottom: 0;
                background: rgba(0,0,0,.6);
                width: 100%;
                height: r(104px);
                padding-left: r(18px);
                padding-top: r(10px);
                p{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 16px;
                    color: #fff;
                    margin-bottom: r(10px);
                }
                .browse{
                    display: inline-block;
                    vertical-align: top;
                    line-height: r(24px);
                }
                .iconfont{
                    display: inline-block;
                    vertical-align: top;
                    margin-right: r(2px);
                    font-size: 14px;
                    color: #fff;
                }
                span{
                    font-size: 12px;
                    color: #fff;
                    display: inline-block;
                    vertical-align: middle;
                }
                .day_wrap{
                    font-size: 12px;
                    color: #FFFFFF;
                    &>p{
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 12px;
                        line-height: r(28px);
                        margin-right: r(18px);
                        &::before{
                            content: "\e63d";
                            margin-right: r(3px);
                            font-size: 14px;
                            display: inline-block;
                            vertical-align: top;
                        }
                        span{
                            display: inline-block;
                            vertical-align: baseline;
                        }
                    }
                }
            }
        }
        
        .pic_box li img {
            width: 100%;
            display: block;
        }
        
        .pannel {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 1%;
            text-align: center;
            z-index: 99;
        }
        
        .pannel li {
            display: inline-block;
            width: r(10px);
            height: r(10px);
            border-radius: 50%;
            background: rgb(183, 183, 183);
            margin-right: r(12px);
        }
        .pannel .active {
            background: red;
            border-color: red;
        }
//结束
        section{
            .segment_line{
                height: r(25px);
                width: 100%;
                background: #f5f5f5;
            }
            .menu_wrap{
                width: r(585px);
                margin: 0 auto;
                padding-top: r(23px);
                margin-bottom: r(25px);
                .information_details{
                    display: flex;
                    justify-content: space-between;
                    .details{
                        font-size: 0;
                        width: r(300px);
                        height: r(60px);
                        .head_portrait{
                            width: r(58px);
                            height: r(58px);
                            margin-right: r(10px);
                            border-radius: 50%;
                            overflow: hidden;
                            background: #898989;
                            display: inline-block;
                            vertical-align: middle;
                            
                            img{
                                width: 100%;
                            }
                        }
                        .details_text{
                            display: inline-block;
                            vertical-align: middle;
                            h6{
                                font-size: 14px;
                                color: #c5c5c5;
                            }
                            p{
                                font-size: 12px;
                                color: #c5c5c5;
                            }
                        }
                    }
                    .btn{
                        width: r(228px);
                        height: r(58px);
                        background: #b20000;
                        text-align: center;
                        font-size: 0;
                        padding: r(15px) 0;
                        &>span{
                            font-size: 14px;
                            color: #fff;
                            line-height: r(25px);
                            vertical-align: middle;
                            margin-right: r(13px);
                        }
                        .img_wrap{
                            display: inline-block;
                            vertical-align: middle;
                            width: r(25px);
                            height: r(25px);
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
                .lesson{
                    display: flex;
                    justify-content: space-between;
                    padding-top: r(10px);
                    padding-bottom: r(8px);
                    border-bottom: r(1px) solid #e2e2e2;
                    margin-bottom: r(17px);
                    &>span{
                        font-size: 14px;
                        line-height: r(28px);
                    }
                    &>em{
                        line-height: r(28px);
                        font-size: 12px;
                    }
                }
                .img_wrap_big{
                    width: r(585px);
                    margin: 0 auto;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
}